<template>
  <div class="container">
    <el-dialog
      :visible="showAddDialog"
      :title="showTitle"
      width="50%"
      @close="btnCancel"
    >
      <el-form
        ref="addForm"
        label-width="80px"
        :model="formData"
        :rules="rules"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor
            :options="editorOption"
            style="height: 300px; padding-bottom: 60px"
            v-model="formData.articleBody"
          >
          </quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="formData.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button type="primary" size="small" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    
  </div>
</template>

<script>
import { add, update, detail } from "@/api/hmmm/articles";
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            [{ list: "ordered" }, { list: "bullet" }], // 有序，无序列表
            ["blockquote"], // 引用
            ["code-block", "link", "image"], // 代码块 链接 图片
          ],
        },
      },
      formData: {
        title: "",
        articleBody: "",
        videoURL: "",
      },
      rules: {
        title: [
          { required: true, message: "文章标题不能为空", trigger: "blur" },
        ],
        articleBody: [
          { required: true, message: "文章内容不能为空", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    quillEditor,
  },
  props: {
    showAddDialog: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    showTitle() {
      return this.formData.id ? "修改文章" : "新增文章";
    },
  },
  methods: {
    async btnOK() {
      try {
        await this.$refs.addForm.validate();
        if (this.formData.id) {
          // 调用编辑接口
          await update(this.formData);
        }
        // 调用新增接口
        await add(this.formData); // 新增接口
        // 父组件跟新视图
        this.$emit("addForm");
        this.$emit("update:showAddDialog", false);
      } catch (error) {
        console.log(error);
      }
    },
    btnCancel() {
      this.formData = {
        title: "",
        articleBody: "",
        videoURL: "",
      };
      this.$emit("update:showAddDialog", false);
      //   清除之前的校验 可以重置数据，定义在data中的数据
      this.$refs.addForm.resetFields();
    },
    async editArticle(id) {
      const { data } = await detail({ id });
      console.log(data);
      this.formData = data;
    },
  },
};
</script>

<style scoped lang='less'></style>
